import React                from 'react';
import {connect}            from "react-redux";

import Nav                  from '../../config/Navigator';
import Base                 from '../../components/BaseComponent';
import Item                 from '../../components/form/Item';
import Ident                from '../../components/form/Ident';
import {PHONE}              from '../../utils/Format';
import {activeAdd}          from "../../actions/active";
import './active.scss';
import {loadVip} from '../../actions/common';

export class Active extends Base {

    state = {
        sex: '男',
        name: '',
        ident: '',
        phone: '',
        birthday: '',
        isMember:false
    };

    _ident = {};
    saving = false;
    saveText = '激活';

    checked = sex => this.state.sex === sex;

    _check(){
        var {name, phone, ident, birthday} = this.state;
        if(_.isEmpty(phone)){
            return this.alert('手机号码不能为空');
        }
        if(!PHONE.test(phone)){
            return this.alert('请输入正确的手机号!');
        }
        if(_.isEmpty(ident)){
            return this.alert('验证码不能为空');
        }
        if(_.isEmpty(name)){
            return this.alert('姓名不能为空');
        }
        if(!/^[\u4E00-\u9FA5A-Za-z]+$/.test(name)){
            return this.alert('姓名必须为英文和汉字');
        }
        if(name.replace(/[^\x00-\xff]/g,"aa").length > 6){
            return this.alert('姓名长度不合法');
        }
        if(_.isEmpty(birthday)){
            return this.alert('生日不能为空');
        }
        if(this._ident[phone] !== ident){
            return this.alert('验证码不正确');
        }
        return true;
    }

    componentWillMount(){
        document.title = '激活会员';
        // 入口拦截 移至 御承德方优惠券页
        // this.props.loadVip().then((r)=>{
        //     if(!r.isRegistered){
        //       window.location.href="http://hmwxycdf.shhm360.com/tpages/index.html#/login/1"
        //     }else{
        //         this.setState({isMember:true})
        //     }
        // })
    }

    componentDidMount(){
        var currYear = (new Date()).getFullYear();
        var opt={};
        opt.date = {preset : 'date'};
        opt.datetime = {preset : 'datetime'};
        opt.time = {preset : 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear - 129, //开始年份
            endYear: currYear,  //结束年份
        };

        $(this.refs.birthday).on('change', this.handleChange('birthday')).mobiscroll($.extend(opt['date'], opt['default']));
    }

    preIdent(){
        return Promise.resolve(true);
    }

    ident(ident, phone){
        if(ident === false){
            return this.alert('请输入正确的手机号!');
        }
        this._ident[phone] = ident;
        return true;
    }

    save(){
        if(!this.saving && this._check() === true){
            this.saving = true;
            this.props.activeAdd(this.state).then(r => {
                this.alert('激活成功');
                this.saving = false;
                this.router.push(Nav.auth('voucher'));
            });
        }
    }

    render(){
        var {name, phone, ident, birthday} = this.state;
        return (
           <div className="active">
                <Item label="手机号">
                    <input
                        type="text"
                        value={phone}
                        maxLength="11"
                        onChange={this.handleChange('phone')}
                        placeholder="请输入手机号"
                    />
                </Item>
                <Item label="验证码" extra={<Ident phone={phone} preIdent={this.preIdent.bind(this)} getIdent={this.ident.bind(this)}/>}>
                    <input
                        type="text"
                        value={ident}
                        onChange={this.handleChange('ident')}
                        maxLength="4"
                        placeholder="请输入验证码"
                    />
                </Item>
                <Item label="姓名">
                    <input
                        type="text"
                        value={name}
                        onChange={this.handleChange('name')}
                        maxLength="6"
                        placeholder="请输入姓名"
                    />
                </Item>
                <Item label="性别" className="sex">
                    <label><input name="sex" type="radio" value="男" checked={this.checked('男')} onChange={this.handleChange('sex')}/>男</label>
                    <label><input name="sex" type="radio" value="女" checked={this.checked('女')} onChange={this.handleChange('sex')}/>女</label>
                </Item>
                <Item label="生日">
                    <input
                        ref="birthday"
                        type="text"
                        value={birthday}
                        placeholder="请输入生日"
                    />
                </Item>
                <div className="a-btn flex-avg" onClick={() => this.save()}>{this.saveText}</div>
            </div>
        );
    }

}

export default connect(undefined, {activeAdd,loadVip})(Active);
